<template>
  <!-- 个人信息页面 -->
  <div>
    <el-card>
      <h2 class="tit">个人信息</h2>
      <div class="infoBox">
        <ul>
          <li v-for="(item, i) in infoList" :key="i">
            <h4><i :class="item.icon"></i>{{ item.title }}</h4>
            <p v-for="(item0, i0) in item.itemArr" :key="i0">{{ item0 }}</p>
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infoList: [
        {
          title: "基本信息",
          icon: "iconfont icon-jibenxinxi",
          itemArr: ["用户姓名：   sys", "身份证号：	340822198911202075"]
        },
        {
          title: "联系方式",
          icon: "iconfont icon-lianxifangshi",
          itemArr: ["移动电话：	13000400496","办公电话：	0310-4567858","家庭电话：	0310-4567885","邮箱地址：	123@vprisk.com"]
        },
        {
          title: "所属机构",
          icon: "iconfont icon-jigouguanli",
          itemArr: ["泛鹏银行"]
        },
        {
          title: "用户角色",
          icon: "iconfont icon-yonghuguanli",
          itemArr: ["总行头寸管理员,分行头寸管理员,支行头寸管理员,sysadmin"]
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.tit {
  font-size: 18px;
}
.infoBox {
  font-size: 14px;
  ul li {
    margin: 20px;
    h4 {
      i {
        color: #8d97b0;
        font-size: 18px !important;
      }
    }
    p{
        margin: 10px 50px;
    }
  }
}
</style>